<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Todo Demo</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ a }}
			<p v-bind:id="dynamicId" v-html="rawHtml"></p>
			<p>{{ number + 1 }}</p>
			<p v-if="seen">Now you can see me.</p>
		</div>
		
		<div id="test" v-bind:class="color">
			<span>test_bind_class</span>
		</div>
		
		<script type="text/javascript">
			var data = { a : 1 };
			var vm = new Vue({
				el: "#app",
				data: {
					a : "hi, vue ...",
					rawHtml : '<span style="color:red">it should be red.</span>',
					dynamicId : 'dynamicAreaId',
					number : 10,
					seen : false
				}
			});
			
			var test = new Vue({
				el: "#test",
				data: {
					color: 'red'
				}
			})
		</script>
		<style type="text/css">
			.red {
				color : red;
			}
		</style>
	</body>
</html>
